<template>
  <div class="shop">
    <div class="info">
      <span @click="back" class="el-icon-arrow-left"></span>
      <div class="detail">
        <img :src="shopImgUrl + shopInfo.image_path" alt="" />
        <div class="desc">
          <div class="name">{{ shopInfo.name }}</div>
          <div class="fee">配送费:￥{{ shopInfo.float_delivery_fee }}</div>
          <div class="notice">{{ shopInfo.promotion_info }}</div>
        </div>
        <span class="el-icon-arrow-right"></span>
      </div>
    </div>
    <div class="bar">
      <div class="goods">
        <span @click="showGoods" :class="{ active: isActive }">商品</span>
      </div>
      <div class="comment">
        <span @click="showComments" :class="{ active: isActive === false }"
          >评价</span
        >
      </div>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { getShopInfo } from "../../api/reques";
export default {
  name: "Shop",
  data() {
    return {
      shopImgUrl: "//elm.cangdu.org/img/",//商家logo基本图片
      shopInfo: {},//商家信息
      isActive: true,//控制商品和评价样式，默认显示商品页面
    };
  },
  created() {
    // 获取商铺信息
    getShopInfo(this.$route.params.id)
      .then((res) => {
          //将请求回来的东西赋给data中的数据
        this.shopInfo = res.data;
        //调用vuex中的方法
        //配送费
        this.$store.commit("setDeliveryFee", res.data.float_delivery_fee);
        //起送费
        this.$store.commit(
          "setfloat_minimum_order_amount",
          res.data.float_minimum_order_amount
        );
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
      //点击返回上一级
      back() {
      this.$router.back();
    },
    //显示商品信息
    showGoods() {
      this.isActive = true;
      this.$router.push("goods");
    },
    //显示商品评价
    showComments() {
      this.isActive = false;
      this.$router.push("comments");
    },
  },
};
</script>

<style scoped lang='less'>
.info {
  position: relative;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  background: -webkit-linear-gradient(rgb(129, 129, 252), white);
  .el-icon-arrow-left {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 10;
    font-size: 25px;
    color: #fff;
    font-weight: 600;
  }
  .detail {
    padding: 0 10px;
    display: flex;
    position: relative;
    align-items: center;
    .el-icon-arrow-right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5px;
      z-index: 10;
      color: #fff;
    }
    img {
      width: 70px;
      border-radius: 10px;
    }
    .desc {
      height: 60px;
      margin-left: 10px;
      display: flex;
      flex: 1;
      color: #fff;
      font-size: 12px;
      flex-direction: column;
      justify-content: space-around;
      div {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
.bar {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  .goods,
  .comment {
    padding: 10px;
    flex: 1;
    text-align: center;
    span {
      font-size: 13px;
      display: inline-block;
      padding: 7px 2px;
    }
  }
}
.active {
  border-bottom: 3px solid rgb(142, 150, 255);
  color: rgb(142, 150, 255);
}
</style>
